const { ipcRenderer } = require("electron")
const { $ , formatDuration } = require("./helper")
let musicAudio = new Audio();
let allTrack;
let currentTrack;
window.addEventListener('DOMContentLoaded',()=>{
    $("add-music-button").addEventListener('click',()=>{
        ipcRenderer.send('add-music-window');
    });
    $('tracksList').addEventListener('click',(event)=> {
        event.preventDefault();
        const {dataset, classList} = event.target;
        const id = dataset && dataset.id;
        if (id && classList.contains('fa-play')) {
            //播放音乐
            if (currentTrack && currentTrack.id == id) {
                musicAudio.play();
                //继续播放音乐
            } else {
                //播放新歌曲,并还原之前的图标
                currentTrack = allTrack.find(track => track.id == id);
                musicAudio.src = currentTrack.path;
                musicAudio.play();
                const resetIconEle = document.querySelector('.fa-pause');
                if(resetIconEle){
                    resetIconEle.classList.replace('fa-pause','fa-play');
                }
            }
            classList.replace('fa-play', 'fa-pause');
        }
        else if(id && classList.contains('fa-pause')){
            //暂停音乐
            musicAudio.pause();
            classList.replace('fa-pause','fa-play');
        }
        else if(id && classList.contains('fa-trash-alt')){
            //删除音乐
            musicAudio.pause();
            ipcRenderer.send('delete-track',id);
        }
    });
});
ipcRenderer.on('getTracks',(event,arguments)=>{
    allTrack = arguments;
    renderListHtml(arguments);
});
musicAudio.addEventListener('loadedmetadata',()=>{
    renderPlayerHtml(currentTrack.filename,musicAudio.duration);
});
musicAudio.addEventListener('timeupdate',()=>{
    updateProgressHtml(musicAudio.currentTime,musicAudio.duration);
});
const renderListHtml = (tracks) => {
    const tracksList = $("tracksList");
    const tracksListHtmlStr = tracks.reduce((html,track)=>{
        html += `<li class="music-track list-group-item d-flex justify-content-between align-items-center row">
            <div class="col-10">
                <i class="fas fa-music mr-2 text-secondary"></i>
                <b>${track.filename}</b>
            </div>
            <div class="col-2">
                <i class="fas fa-play mr-2 ml-2" data-id="${track.id}"></i>
                <i class="fas fa-trash-alt mr-2 ml-2" data-id="${track.id}"></i>
            </div>
        </li>`;
        return html;
    },'')
    const emptyTracksHtml = `<div class="alert alert-primary">还没有添加任何音乐</div>`;
    tracksList.innerHTML =  tracks.length ? `<ul class="list-group">${tracksListHtmlStr}</ul>` :  `<ul class="list-group">${emptyTracksHtml}</ul>`
}

const updateProgressHtml = (currentTime,duration)=>{
    const progress_bar = $("progress_bar");
    const player_seeker = $("player_seeker");
    let progress = Math.floor(currentTime / duration * 100) + "%";
    progress_bar.style.width = progress;
    progress_bar.innerHTML = progress;
    player_seeker.innerHTML = formatDuration(currentTime);
}

const renderPlayerHtml = (name,duration) => {
    const player = $('player_status');
    duration = formatDuration(duration);
    const html = `<div class="col-10 font-weight-bold">
        正在播放:${name}
    </div>
    <div class="col-2">
        <span id="player_seeker">00:00</span>/${duration}
    </div>
</div>`;
    player.innerHTML = html;
}